import { Routes, Route, Outlet, Link , HashRouter} from "react-router-dom";

export default function App() {
  function Layout() {
    return (
        <div>
          <Link to="/">Home</Link><hr/>
          <Link to="/about">About</Link><hr/>
          <Link to="/anypath">Nothing Here</Link>
          <hr/>
          <Outlet />
        </div>
    );
  }

  return (
    <div>
      <h1>Basic Example</h1>
      <HashRouter>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route index element={<Home />} />
            <Route path="about" element={<Abouttt />} />
            <Route path="*" element={<NoMatchhh />} />
          </Route>
        </Routes>
      </HashRouter>

    </div>
  );
}


function Home() {
  return (
    <div>
      <h2>Homzzzzzzzzzzzze</h2>
    </div>
  );
}

function Abouttt() {
  return (
    <div>
      <h2>Abouzzzzzzzzzt</h2>
    </div>
  );
}

function NoMatchhh() {
  return (
    <div>
      <h2>这里啥也没有!</h2>
      <p>
        <Link to="/">Go to the home page</Link>
      </p>
    </div>
  );
}
